<template>
  <div class="app-container">
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
      <el-col :span="16">
        <el-form-item label-width="200px" label="图片文件" prop="picture" ref="fileItem" >
          <el-upload ref="uploadImg" :action="upload.postUrl"
                     :auto-upload="false"
                     :on-change="handleChange"
                     :disabled="upload.isUploading"
                     :headers="upload.headers"
                     :on-progress="handleFileUploadProgress"
                     :on-success="handleFileSuccess"
                     :before-upload="imgFileBeforeUpload"
                     list-type="picture-card" accept="image/*">
            <el-button size="small" type="primary" icon="el-icon-upload">选择文件</el-button>
            <div slot="tip" class="el-upload__tip">只能上传不超过 10MB 的image/*文件</div>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label-width="200px" label="识别结果" prop="distinguish">
          <el-input v-model="formData.distinguish" type="textarea" :autosize="{minRows: 5, maxRows: 10}"
                    :style="{width: '100%'}"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item size="large" align="center">
          <el-button type="success" icon="el-icon-check" @click="submitForm">{{buttonName}}</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>

import {getToken} from "@/utils/auth";

export default {
  name: "distinguish",
  components: {
  },
  props: {
    /* 编辑器的内容 */
    buttonName: {
      type: String,
      default: "提交",
    },
    /* 提交的类型 */
    postType: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      formData: {
        imgFile:'',
        distinguish: undefined,
        type: this.postType
      },
      ///////////////////////导入-文件上传///////////////////
      upload: {
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        postUrl: process.env.VUE_APP_BASE_API + "/third/ai/queryAi?type=" + this.postType, // 上传的图片服务器地址
      },
      rules: {
        picture: [
          // { required: true, trigger: "change", message: "请选择一个图片文件" }
        ],
      },
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (valid && this.formData.imgFile) {
          // 提交表单
          this.$refs.uploadImg.submit();
        } else {
          this.msgError("请选择一个图片文件");
        }
      })
    },
    imgFileBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 10
      if (!isRightSize) {
        this.$message.error('文件大小超过 10MB')
      }
      let isAccept = new RegExp('image/*').test(file.type)
      if (!isAccept) {
        this.$message.error('应该选择image/*类型的文件')
      }
      return isRightSize && isAccept
    },
    handleChange(file, fileList) {
      if (fileList.length > 1) {
        fileList.shift()
      }
      this.formData.imgFile = file;
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.isUploading = false;
      this.formData.distinguish = response.data;
    },
  }
};
</script>

<style>


</style>
